from dash import dcc, html
from .runningreport import update_run_report_graph_1, get_running_detail_by_id
from datetime import date, timedelta

def create_detail_layout(device_id=None):
    # 先处理统计数据
    # if device_id is not None:
    #     repair_count, maintain_count, inspection_count, strong_inspect_count, calibration_count = get_running_detail_by_id(device_id)
    #     run_report_fig_1 = update_run_report_graph_1(repair_count, maintain_count, inspection_count, strong_inspect_count, calibration_count)
    # else:
    #     run_report_fig_1 = update_run_report_graph_1(0, 0, 0, 0, 0)

    return html.Div([
        dcc.Store(id='detail-device-id'),
        # 顶部区域 (较小)
        html.Div([
            
            html.Div([
                html.H3("分析管理", style={'text-align': 'center', 'margin': 0}),
            ], style={'flex': '1 1 auto', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center'}),
            html.Div([
                
                dcc.DatePickerRange(
                    id='date-picker-range',
                    min_date_allowed=date(2020, 1, 1),
                    max_date_allowed=date.today(),
                    initial_visible_month=date.today(),
                    start_date=date(date.today().year, 1, 1),
                    end_date=date(date.today().year, 12, 31),
                    display_format='YYYY-MM-DD',
                    style={'display': 'inline-block'}
                )
            ], style={'flex': '0 0 auto', 'display': 'flex', 'align-items': 'center'})
        ], className='equipment-detail-top-section', style={'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'padding': '10px 0'}),

        # 底部区域 (较大)，再分为左右两部分
        html.Div([
            html.Hr(),
            html.Div([
                html.H2("基本信息"),
                html.Div([
                    html.Div([html.Div("资产id：", className="info-title"), html.Div(id='detail-device-id', className="info-value")], className="info-row"),
                    html.Div([html.Div("资产名称：", className="info-title"), html.Div(id='detail-device-name', className="info-value")], className="info-row"),
                    html.Div([html.Div("资产编号：", className="info-title"), html.Div(id='detail-device-code', className="info-value")], className="info-row"),
                    html.Div([html.Div("资产型号：", className="info-title"), html.Div(id='detail-device-model', className="info-value")], className="info-row"),
                    html.Div([html.Div("资产序列号：", className="info-title"), html.Div(id='detail-device-sn', className="info-value")], className="info-row"),
                    html.Div([html.Div("所属机构：", className="info-title"), html.Div(id='detail-device-org', className="info-value")], className="info-row"),
                    html.Div([html.Div("所属部门：", className="info-title"), html.Div(id='detail-device-department', className="info-value")], className="info-row"),
                    html.Div([html.Div("购买日期：", className="info-title"), html.Div(id='detail-device-purchase-date', className="info-value")], className="info-row"),
                    html.Div([html.Div("启用日期：", className="info-title"), html.Div(id='detail-device-launch-date', className="info-value")], className="info-row"),
                    html.Div([html.Div("设备价格(万)：", className="info-title"), html.Div(id='detail-device-price', className="info-value")], className="info-row"),
                    html.Div([html.Div("设备状态：", className="info-title"), html.Div(id='detail-device-status', className="info-value")], className="info-row"),
                    html.Div([html.Div("负责人：", className="info-title"), html.Div(id='detail-device-owner', className="info-value")], className="info-row"),
                    html.Div([html.Div("保修状况：", className="info-title"), html.Div(id='detail-device-ensure-status', className="info-value")], className="info-row"),
                ], className='equipment-basic-info'),
            ]),
            html.Div([
                html.Div([
                    html.A('运行报告', href='#', className='tab-link', id='link-运行报告'),
                    html.A('重大事件', href='#', className='tab-link', id='link-重大事件'),
                    html.A('资产信息', href='#', className='tab-link', id='link-资产信息'),
                    html.A('合同记录', href='#', className='tab-link', id='link-合同记录'),
                    html.A('绩效分析', href='#', className='tab-link', id='link-绩效分析'),
                    html.A('绩效目标', href='#', className='tab-link', id='link-绩效目标'),
                    html.A('其他', href='#', className='tab-link', id='link-其他'),
                    html.A('实时监控', href='#', className='tab-link', id='link-实时监控'),
                ], className='tab-links-container'),
                html.Div(id='detail-tabs-content'),
                html.Div([
                    html.Div([
                        dcc.Graph(id='run-report-graph-1', style={'width': '48%', 'display': 'inline-block', 'height': '480px'}),
                        dcc.Graph(id='run-report-graph-3', style={'width': '48%', 'display': 'inline-block', 'height': '480px'}),
                    ], style={'width': '100%'}),
                    html.Div([
                        
                        
                        html.Table([
                            
                        ],id='run-report-table', className='run-report-table', style={'width': '50%', 'display': 'inline-block'}),
                        html.Table([
                           
                        ],id='run-report-table3', className='run-report-table3', style={'width': '50%', 'display': 'inline-block'}),
                    ], style={'width': '100%'})
                ], id='run-report-graphs', style={'display': 'block', 'max-height': '80vh', 'overflow': 'auto'})
            ], className='equipment-detail-right-panel'),
        ], className='equipment-detail-bottom-section'),
    ], className='equipment-detail-container')
    


